import React from 'react'
import { NavBar } from 'antd-mobile'
import { getChatList } from '../../api/allapi'
import ChatWindow from './chatwindow'
import './chat.css'

class Chat extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
      isShow: false,
      item: {}
    }
  }
  componentDidMount() {
    this.getChatListData()
  }
  componentWillUnmount() {
    this.setState = state => {
      return
    }
  }
  // 获取聊天用户列表数据
  getChatListData = async () => {
    const { data: { list }, meta: { status, msg } } = await getChatList()
    if (status === 200) {
      this.setState({
        list
      })
    } else {
      console.log(msg);
    }
  }
  showChatwindow = (item) => {
    console.log(item);
    this.setState({
      isShow: true,
      item
    })
  }
  changeIsShow = () => {
    this.setState({
      isShow: false
    })
  }
  render() {
    const { title } = this.props
    const listContent = this.state.list.map(item => {
      return (
        <li key={item.id} onClick={this.showChatwindow.bind(this, item)}>
          <div className='avarter'>
            <img src={`http://127.0.0.1:8086/${item.avatar}`} alt="avarter" />
            <span className='name'>{item.username}</span>
            <span className='info'>{item.chat_msg}</span>
            <span className='time'>{item.ctime}</span>
          </div>
        </li>
      )
    })
    return (
      <div>
        {this.state.isShow ? <ChatWindow changeIsShow={this.changeIsShow} item={this.state.item} /> : <div>
          {/* 导航 */}
          <NavBar mode="light" >{title}</NavBar>
          <div className='chat-list'>
            <ul>{listContent}</ul>
          </div>
        </div>}
      </div>
    )
  }
}
export default Chat
